<template>
  <ul id="searchInput">
    <input type="text" v-model="value"  :placeholder="$t('search.inputTip')" :style="'width:'+textWidth+'px'">
    <button v-show="valueIsNull()" class="cancel" @click="clearValue">
      <van-icon name="cross"></van-icon>
    </button>
    <button @click="onSearch">
      <van-icon slot="action" size="30px" name="search"/>
    </button>
  </ul>
</template>

<script>
    export default {
        name: "searchInput",
      data(){
          return{
            isShowAction:true,
            value:'',
            textWidth:0,
          }
      },
      computed:{
        lang:{
          get(){
            let storageData = window.sessionStorage.getItem('lang');
            if(this.$store.state.lang!==storageData&&storageData!=='null'){
              this.$store.dispatch('toChangeLang', storageData);    //同步操作
            }
            return this.$store.getters.getLang;
          },
          set(){}
        },
      },
      methods:{
        valueIsNull(){
          if(this.value!==''){
            return true;
          }else{
            return false;
          }
        },
        clearValue(){
          this.value='';
        },
        onSearch:function () {
          this.$store.dispatch('toChangeSearchContent',this.value);
          let nowMallCategoryId=this.$store.getters.getNowMallCategoryId;
          this.getProductClass(nowMallCategoryId,this.value);
          this.$store.dispatch('toChangeSearchPopup');
          if(this.$store.getters.getSearchPopup){
            this.$store.dispatch('toChangeCurrentPageText',this.$t('search.searchText'));
          }else{
            this.$store.dispatch('toChangeCurrentPageText',this.$t('search.mall'));
          }
        },
        getProductClass(nowCategoryID,search){
          //获取分类下的产品
          this.$store.dispatch('toChangeLoadIngVisible',true);
          let _this=this;
          this.axios.get(domain.url+'product/api/get_product_list', {
            params: {
              language: _this.lang,
              page:1,
              limit:6,
              category_id:nowCategoryID,
              search:search,
            }
          })
            .then(function (response) {
              //分类下的产品-
              if(response.data.list.data.length<1){
                _this.$store.dispatch('toChangeIsNull',true);
              }
              else{
                _this.$store.dispatch('toChangeIsNull',false);
              }
              _this.$store.dispatch('toChangeMallProducts',response.data.list.data);
              _this.$store.dispatch('toChangeMallProductList',response.data.list);
              _this.$router.push('/MallIndex');
              _this.$store.dispatch('toChangeLoadIngVisible',false);
            })
            .catch(function (error) {
              console.log(error);
            });
        },
        getScreen:function(){
          this.textWidth=document.body.clientWidth-85;
        },
      },
      mounted(){
        this.getScreen();
      }
    }
</script>

<style scoped>
  #searchInput{
    width:100%;
    padding:10px;
  }
  #searchInput input[type='text']{
    height:30px;
    border:0;
    background: #f5f5f5;
    padding:3px 10px;
    color:#999999;
    float: left;
  }
  #searchInput button:active{
    background: #f5f5f5;
  }
  #searchInput button{
    height:36px;
    width:36px;
    border:0;
    float: left;
    margin-left: 8px;
    background: rgba(0,0,0,0);
    color:#999999;
    vertical-align: middle;
  }
  .cancel{
    margin-left: -35px !important;
    vertical-align: middle;
  }
  .cancel .van-icon{
    font-size:20px;
    bottom: -2px;
  }
</style>
